.content{
	padding: 4px 20px;
}
.flex{
	display: flex;
}
.flex-row{
	display: flex;
	flex-direction: row;
}
.flex-row-reveser{
	display: flex;
	flex-direction: row-reverse;
}
.flex-column{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.flex-column-reverse{
	/* 从下到上排版 */
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
}
.flex-wrap{
	/* 换行显示 */
	display: flex;
	flex-wrap: wrap;
}
.flex-wrap-reverse{
	display: flex;
	flex-wrap: wrap-reverse;
}
.flex-start{
	/* 靠左 */
	display: flex;
	justify-content: flex-start;
}
.flex-center{
	/* 靠中 */
	display: flex;
	justify-content: center;
}
.flex-end{
	/* 靠右 */
	display: flex;
	justify-content: flex-end;
}
.space-around{
	display: flex;
	justify-content: space-around;
}
.space-between{
	display: flex;
	justify-content: space-between;
}
.flex-item{
	width: 100upx;
	height: 100upx;
	background-color: darkorange;
	line-height: 100upx;
	text-align: center;
	color:#ffffff;
	border: 2upx solid #f2f2f2;
}
 .box{
 	width: 670upx;
 	height: 670upx;
 	margin: 0 40upx;
 	background: lightskyblue;
 }
 .box .flex-item:nth-child(2){
 	height: 200upx;
 	line-height: 200upx;
 }
 .box .flex-item:nth-child(3){
 	height: 400upx;
 	line-height: 400upx;
 }
 .box .flex-item:nth-child(4){
 	height: 300upx;
 	line-height: 300upx;
 }
 .aif-start{
 	/* 顶端对齐 */
 	display: flex;
 	justify-content: space-between;
 	align-items: flex-start;
 }
 .aif-center{
 	/* 中心对齐 */
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 }
 .aif-end{
 	/* 底部对齐 */
 	display: flex;
 	justify-content: space-between;
 	align-items: flex-end;
 }
 .aif-stretch{
 	display: flex;
 	justify-content: space-between;
 	align-items: stretch;
 }
 .aif-stretch .flex-item{
 	/* 清空其他样式设置的高度 */
 	height: auto !important;
 	line-height: inherit !important;
 }
 .aif-baseline{
 	display: flex;
 	justify-content: space-between;
 	align-items: baseline;
 }
 .ac-start{
 	display: flex;
 	flex-wrap: wrap;
 	align-content: flex-start;
 }
 [class^="box ac"] .flex-item{
 	height: 100upx !important;
 	line-height: 100upx !important;
 	margin: auto 50upx;
 }
 .ac-center{
 	display: flex;
 	flex-wrap: wrap;
 	align-content: center;
 }
 .ac-end{
 	display: flex;
 	flex-wrap: wrap;
 	align-content: flex-end;
 }
 .ac-around{
 	display: flex;
 	flex-wrap: wrap;
 	align-content: space-around;
 }
 .ac-between{
 	display: flex;
 	flex-wrap: wrap;
 	align-content: space-between;
 }
 .grow{
 	flex-grow: 1;
 	height: 100upx;
 	background: lightgreen;
 	border: 2px solid #ffffff;
 }
 .rate .grow:nth-child(1){
 	flex-grow: 1;
 }
 .rate .grow:nth-child(2){
 	flex-grow: 3;
 }
 .rate .grow:nth-child(3){
 	flex-grow: 2;
 }